<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<template v-if="isLogin">
			<view class="body">
				<template >
				<view class="form-wrap m-b2">
					<view class="form-item">
						<view class="label">培训名称：</view>
						<view class="form-input">
							<view class="content">
								<input type="text" class="inp" v-model="params.px_name" placeholder="输入培训名称" />
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="label">省 份：</view>
						<picker mode="selector" :range="provinces" range-key="name" class="form-picker" @change="changeProvince">
							<view class="picker">
								<input type="text" v-model="params.province.name" disabled class="select-data t-l" placeholder="请选择省份">
								<view class="icon">
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</picker>
					</view>
					<view v-if="params.province.name" class="form-item">
						<view class="label">城 市：</view>
						<picker mode="selector" :range="citys" range-key="name" class="form-picker" @change="changeCity">
							<view class="picker">
								<input type="text" v-model="params.city.name" disabled class="select-data t-l" placeholder="请选择城市">
								<view class="icon">
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</picker>
					</view>
					<view v-if="params.city.name" class="form-item">
						<view class="label">区/县：</view>
						<picker mode="selector" :range="districts" range-key="name" class="form-picker" @change="changeDistrict">
							<view class="picker">
								<input type="text" v-model="params.district.name" disabled class="select-data t-l" placeholder="请选择区/县">
								<view class="icon">
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</picker>
					</view>
					<view v-if="params.district.name" class="form-item">
						<view class="label">镇/街道：</view>
						<picker class="form-picker" :range="towns" range-key="name" mode="selector" @change="changeTown">
							<view class="picker">
								<input type="text" v-model="params.town.name" disabled class="select-data t-l" placeholder="请选择镇/街道">
								<view class="icon">
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</picker>
					</view>
					<view v-if="params.town.name" class="form-item">
						<view class="label">村/社区：</view>
						<picker class="form-picker" :range="villages" range-key="name" mode="selector" @change="changeVillage">
							<view class="picker">
								<input type="text" v-model="params.village.name" disabled class="select-data t-l" placeholder="选择村/社区">
								<view class="icon">
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</picker>
					</view>
					
					<!-- <view class="form-item">
						<view class="label">培训区域：</view>
						<view class="form-input">
							<view class="content" @click="selectArea">
								<input type="text" class="inp" disabled v-model="params.area" placeholder="选择培训区域" />
								<view class="icon">
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</view>
					</view> -->
					<view class="form-item">
						<view class="label">详细地址：</view>
						<view class="form-input">
							<view class="content">
								<input type="text" class="inp" v-model="params.px_place" placeholder="输入培训地点" />
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="label">培训讲师：</view>
						<view class="form-input">
							<view class="content">
								<input type="text" class="inp" v-model="params.teacher_name" placeholder="输入培训讲师" />
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="label">培训对象：</view>
						<picker class="form-picker" mode="selector" :value="params.index0" :range="pxObjects"
							@change="changeObjects">
							<view class="picker">
								<input type="text" class="select-data t-l" :value="pxObjects[params.index0]"
									placeholder="选择培训对象" disabled>
								<view class="icon">
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</picker>
					</view>

					<view class="form-item">
						<view class="label">培训人数：</view>
						<view class="form-input">
							<view class="content">
								<input type="number" class="inp" v-model="params.px_number" placeholder="输入培训人数" />
							</view>
						</view>
					</view>

					<view class="form-item">
						<view class="label">组织单位：</view>
						<view class="form-input">
							<view class="content">
								<input type="text" class="inp" v-model="params.px_co" placeholder="输入组织单位" />
							</view>
						</view>
					</view>

					<view class="form-item">
						<view class="label">培训日期：</view>
						<picker class="form-picker" mode="date" @change="changeDate($event,2)">
							<view class="picker">
								<input type="text" class="select-data t-l" v-model="params.px_date" placeholder="选择培训日期"
									disabled>
								<view class="icon">
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</picker>
					</view>
				</view>

				<!-- 图片上传 -->
				<view class="form-wrap m-b2">
					<view class="upload-pic-item">
						<view class="label">上传签到表及会议通知</view>
						<view class="form-upload-pic">
							<template>
								<view class="img-item" v-for="(item,index) in files0" :key="index">
									<image src="@/static/images/filter_bg.png" mode="widthFix">
										<!-- 占位 -->
									</image>
									<view class="img-wrap" @click="previewPic(0,index)">
										<image class="img" :src="item.url" mode="widthFix"></image>
									</view>
									<view class="del-icon" @click="delPic(0,index)">
										<view class="iconfont">&#xe74b;</view>
									</view>
									<view v-if="item.status==0" class="loading-img">
										<div class="loading-icon loader-18"></div>
									</view> 
								</view>
							</template>
							<view class="img-item add-btn" @click="uploadImage(0)">
								<image src="@/static/images/upload_pic.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>

				<view class="form-wrap m-b2">
					<view class="upload-pic-item">
						<view class="label">上传培训照片</view>
						<view class="form-upload-pic">
							<template>
								<view class="img-item" v-for="(item,index) in files1" :key="index">
									<image src="@/static/images/filter_bg.png" mode="widthFix">
										<!-- 占位 -->
									</image>
									<view class="img-wrap" @click="previewPic(1,index)">
										<image class="img" :src="item.url" mode="widthFix"></image>
									</view>
									<view class="del-icon" @click="delPic(1,index)">
										<view class="iconfont">&#xe74b;</view>
									</view>
									<view v-if="item.status==0" class="loading-img">
										<div class="loading-icon loader-18"></div>
									</view> 
								</view>
							</template>
							<view class="img-item add-btn" @click="uploadImage(1)">
								<image src="@/static/images/upload_pic.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				</template> 

			</view>

			<!-- 底部 -->
			<view class="footer">
				<view class="fix-wrap bottom">
					<view class="btn" @click="submit">提交</view>
				</view>
			</view>

			<view v-if="flag.isFullPage" class="full-fix-page">
				<template v-if="flag.isShowSelectArea">
					<selectArea @cancle="closeSelectArea" @confirm="confirmArea" :selectData="selectAreaData"></selectArea>	
				</template>							 
			</view>

		</template>
	</view>
</template>

<script>
	import {
		dateFormat,
		uploadImage,
		previewImage,
		uploadToServe
	} from '@/common/util.js'
	import selectArea from '@/components/selectArea.vue'

	export default {
		name: 'name',
		data() {
			return {
				type:'',
				isLogin: true,
				isIphoneX: getApp().globalData.isIphoneX,
				userInfo: uni.getStorageSync('userInfo'),
				isStop: true,
				pxObjects: ["省级", "市级", "县（市、区）级", "镇级"],
				files0: [], // 签到表图片
				files1: [], // 培训照片
				selectAreaData:{},
				provinces:[],
				citys:[],
				districts:[],
				towns:[],
				villages:[], 
				params: {	
					area:'',
					address:'',
					px_name: '',
					px_date: '',
					px_place: '',
					teacher_name: '',
					px_number: '',
					px_co: '',
					index0: 0,
					pagename: '',
					province: {},
					city: {},
					district: {},
					town: {},
					village: {},
				},
				flag:{
					isFullPage:false,
					isShowSelectArea:false
				}
				
			}


		},
		async onLoad(params) {
			
			// this.isLogin = await this.$loginState('check');
			this.params.px_date = dateFormat("YYYY-mm-dd", new Date()); 
			this.provinces=await this.getArea('china','china'); 
			 
			
		},
		async onShow() {

		},
		methods: {	
			
			// 获取省份列表
			getArea:async function(areaName,adcode){ 
				let res={}; 
				if (areaName == 'town' || areaName == 'village') {
					res=await this.$api.ydc_api.getStreet({
						areaName: areaName,
						adcode: adcode
					}) 
					 
				}else {
					res=await this.$api.ydc_api.getProvince({
						areaName: areaName,
						adcode: adcode
					})  
				} 
				
				if(res.data.ret==0){ 
					return res.data.data;
				}
			},
			
			// 选择省份
			changeProvince:async function(e){ 
				let idx=e.detail.value; 
				let data=this.provinces[idx];
				this.params.province=data;  
				this.params.city.name='';
				this.params.district.name='';
				this.params.town.name='';
				this.params.village.name='';
				this.params.city.adcode='';
				this.params.district.adcode='';
				this.params.town.adcode='';
				this.params.village.adcode='';
				this.citys=[];
				this.districts=[];
				this.towns=[];
				this.villages=[];
				this.citys=await this.getArea(data.level,data.adcode); 
			},
			
			// 选择城市
			changeCity:async function(e){
				let idx=e.detail.value;
				let data=this.citys[idx];
				this.params.city=data;	 
				this.params.district.name='';
				this.params.town.name='';
				this.params.village.name='';
				this.params.district.adcode='';
				this.params.town.adcode='';
				this.params.village.adcode='';
				this.districts=[];
				this.towns=[];
				this.villages=[];
				this.districts=await this.getArea(data.level,data.adcode) 
			},
			
			// 选择区
			changeDistrict:async function(e){
				let idx=e.detail.value;
				let data=this.districts[idx];
				this.params.district=data; 
				this.params.town.name='';
				this.params.village.name='';
				this.params.town.adcode='';
				this.params.village.adcode='';
				this.towns=[];
				this.villages=[];
				this.towns=await this.getArea('town',data.adcode) 
			},
			
			// 选择镇/街道
			changeTown:async function(e){
				let idx=e.detail.value;
				let data=this.towns[idx];
				this.params.town=data;
				this.params.village.adcode='';
				this.params.village.name=''; 
				this.villages=await this.getArea('village',data.adcode); 
			},
			
			// 选择村/社区
			changeVillage:async function(e){
				let idx=e.detail.value;
				let data=this.villages[idx];
				this.params.village=data; 
			},
			 

			// 切换培训对象
			changeObjects: function(e) {
				this.params.index0 = e.detail.value;
			},


			// 选择培训日期
			changeDate: function(e) {
				this.params.px_date = e.detail.value;
			},



			// 提交数据
			submit: async function() {
				let _this = this;

				if (this.params.px_name == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入培训名称',
						mask: true,
						duration: 1000
					})
					return
				};
				if (this.params.px_place == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入培训地点',
						mask: true,
						duration: 1000
					})
					return
				};
				if (this.params.teacher_name == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入培训讲师',
						mask: true,
						duration: 1000
					})
					return
				};
				if (this.params.px_number == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入培训人数',
						mask: true,
						duration: 1000
					})
					return
				};
				if (this.params.px_co == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入培训单位',
						mask: true,
						duration: 1000
					})
					return
				};
				if (this.files0.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请上传签到表或会议通知',
						mask: true,
						duration: 1000
					})
					return
				};
				if (this.files1.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请上传培训照片',
						mask: true,
						duration: 1000
					})
					return
				};
				
				// let img_files0_status = this.params.files0.some(item => {
				// 	if (item.status == 0) {
				// 		return true
				// 	}
				// })
				// let img_files1_status = this.params.files1.some(item => {
				// 	if (item.status == 0) {
				// 		return true
				// 	}
				// })
				
				// if (img_files0_status||img_files1_status) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '图片未上传完',
				// 		mask: true,
				// 		duration: 1000
				// 	})
				// 	return
				// }
				
				
				
				if (this.isStop) { 
					this.isStop=false;
					this.updateData();					
				}
			},

			// 上传图片
			uploadImage1: async function(type) {
				// type 0 签到表图片  1 培训照片
				let _this = this;
				
				let t_res=await this.$api.user_api.getToken({
					appid:'100002',
					appsecret:'24dcb652ce0043c9a53d90de2468b5b8'
				})  
				uploadImage({
					length: type == 0 ? _this.files0.length : _this.files1.length, 
					maxSize: 1,
					success(res) { 
						console.log(res) 
						if (type == 0) { 
							let params_data = {};
							params_data.url=res.tempFilePaths[0];
							params_data.status=0;
							_this.files0.push(params_data); 
							
							// 签到表图片 
							uploadToServe({
								type:1,
								url: 'https://shibie.honghuoyi.com/user/sb-insert.do',
								filePath: res.tempFilePaths[0],
								name: 'myfile',		
								formData: {
									appid:100002,
									token:t_res.data.data.token,
									uid:_this.userInfo.id
								} 						
							}).then((up_res)=>{   
								console.log('蚁巢识别',up_res)
								if(up_res.ret==0){ 
									
									params_data.file_name=up_res.data.file_name;
									params_data.file_path=up_res.data.file_path;
									params_data.file_type=up_res.data.file_type;
									params_data.status=up_res.data.status;
									params_data.type=up_res.data.type;  
								}
							})	
							 
						} else if (type == 1) {	
							let params_data = {};
							params_data.url=res.tempFilePaths[0];
							params_data.status=0;
							_this.files1.push(params_data);
							
							//  1 培训照片
							uploadToServe({
								url: '/ypx/upload-file',
								filePath: res.tempFilePaths[0],
								name: 'photo',		
								formData: {
									'type': 2,
									'file_type':  res.tempFilePaths[0].split('.')[res.tempFilePaths[0].split('.').length-1],
									'uid':_this.userInfo.id
								} 						
							}).then((up_res)=>{  
								if(up_res.ret==0){  
									params_data.file_name=up_res.data.file_name;
									params_data.file_path=up_res.data.file_path;
									params_data.file_type=up_res.data.file_type;
									params_data.status=up_res.data.status;
									params_data.type=up_res.data.type;  
								}
							})	
						}
					}
				})
			},
			
			uploadImage: function(type) {
				// type 0 签到表图片  1 培训照片
				let _this = this;
				uploadImage({
					length: type == 0 ? _this.files0.length : _this.files1.length, 
					maxSize: 1,
					success(res) { 
						 
						if (type == 0) { 
							let params_data = {};
							params_data.url=res.tempFilePaths[0];
							params_data.status=0;
							_this.files0.push(params_data); 
							
							// 签到表图片 
							uploadToServe({
								url: '/ypx/upload-file',
								filePath: res.tempFilePaths[0],
								name: 'photo',		
								formData: {
									'type': 1,
									'file_type': res.tempFilePaths[0].split('.')[res.tempFilePaths[0].split('.').length-1],
									'uid':_this.userInfo.id
								} 						
							}).then((up_res)=>{   
								
								if(up_res.ret==0){ 
									
									params_data.file_name=up_res.data.file_name;
									params_data.file_path=up_res.data.file_path;
									params_data.file_type=up_res.data.file_type;
									params_data.status=up_res.data.status;
									params_data.type=up_res.data.type;  
								}
							})	
							 
						} else if (type == 1) {	
							let params_data = {};
							params_data.url=res.tempFilePaths[0];
							params_data.status=0;
							_this.files1.push(params_data);
							
							//  1 培训照片
							uploadToServe({
								url: '/ypx/upload-file',
								filePath: res.tempFilePaths[0],
								name: 'photo',		
								formData: {
									'type': 2,
									'file_type':  res.tempFilePaths[0].split('.')[res.tempFilePaths[0].split('.').length-1],
									'uid':_this.userInfo.id
								} 						
							}).then((up_res)=>{  
								console.log('up_res',up_res)
								if(up_res.ret==0){  
									params_data.file_name=up_res.data.file_name;
									params_data.file_path=up_res.data.file_path;
									params_data.file_type=up_res.data.file_type;
									params_data.status=up_res.data.status;
									params_data.type=up_res.data.type;  
								}
							})	
						}
					}
				})
			},

			// 预览图片
			previewPic: function(type, index) {
				// type 0 签到表图片  1 培训照片 
				let preview_data=[];
				if(type==0){
					this.files0.forEach(item=>{
						preview_data.push(item.url);
					})
				}else if(type==1){
					this.files1.forEach(item=>{
						preview_data.push(item.url);
					})
				}
				
				previewImage({
					data: preview_data,
					index: index
				})
			},

			// 删除图片
			delPic: async function(type,index) {
				if (type == 0) {
					let res=await this.$api.ypx_api.ypxDeleteFile({
						file_path:this.files0[index].file_path
					})  
					if(res.data.ret==0){
						this.files0.splice(index, 1);
					} 					
				} else if (type == 1) {
					let res=await this.$api.ypx_api.ypxDeleteFile({
						file_path:this.files1[index].file_path
					})  
					if(res.data.ret==0){
						this.files1.splice(index, 1);
					}  
				}
				 
			}, 

			//上传数据
			updateData: async function() {
				let _this = this;
				uni.showLoading({
					title: '数据提交中...',
					mask:true
				});
				let allFiles = this.files0.concat(this.files1);  
				let res = await this.$api.ypx_api.addPcData({
					'c_id': this.userInfo.id,
					'files': JSON.stringify(allFiles),
					'px_name': this.params.px_name,
					'px_place': this.params.area+this.params.px_place,
					'teacher_name': this.params.teacher_name,
					'px_object': this.pxObjects[this.params.index0],
					'px_number': this.params.px_number,
					'px_co': this.params.px_co,
					'px_date': this.params.px_date ,
					'province':this.params.province.adcode,
					'city': this.params.city.adcode,
					'district': this.params.district.adcode,
					'town': this.params.town.adcode,
					'village': this.params.village.adcode					 
				}) 
				 
				if(res.data.ret==0){
					uni.hideLoading();
					uni.showToast({
						icon: 'success',
						title: '数据提交成功',
						mask: true,
						duration: 1000,
						success() {
							setTimeout(()=>{
								_this.isStop=true;
								uni.navigateBack({
									delta:1
								})
							},300)
						}
					})
				}else{
					uni.hideLoading();
					
					uni.showToast({
						icon: 'none',
						image:'../../static/images/error.png',
						title: res.data.message,
						mask: true,
						duration: 1000,
						success() {
							setTimeout(()=>{
								_this.isStop=true;
							},300)
						}
					})
				}
				 
			},
			
			// 选择地区
			selectArea:function(){
				this.flag.isFullPage=true;
				this.flag.isShowSelectArea=true; 	
			},
			
			// 关闭地区选择
			closeSelectArea:function(){
				this.flag.isFullPage=false;
				this.flag.isShowSelectArea=false; 				
			},
			
			// 确定选择区域
			confirmArea:function(data){  
				console.log(data)
				this.selectAreaData=data; 
				this.params.area='';
				for(let i in this.selectAreaData){		
					if(this.selectAreaData[i].show){
						this.params.area+=this.selectAreaData[i].name+' ';
					} 			
				} 
				this.closeSelectArea();
			}
			

		},
		components: {
			selectArea
		},

		computed: {

		},
		watch: {

		}

	}
</script>

<style lang="less">
	.form-wrap .label {
		width: 35%;
	}

	.form-wrap .content .link {
		color: #000;
	}

	.status {
		padding: 0 20rpx;
		color: #f00;
		font-size: 28rpx;
	}

	.btn {
		@h: 80rpx;
		width: 98%;
		margin: 10rpx auto;
		text-align: center;
		height: @h;
		line-height: @h;
		background: linear-gradient(#e96b5c, #ce3c2f);
		border-radius: 10rpx;
		color: #fff;
		font-size: 34rpx;
	}

	.prev-btn {
		text-align: right;
		padding: 20rpx;

		text {
			padding: 4rpx 15rpx;
			background: #ff9600;
			border-radius: 8rpx;
			color: #fff;
			font-size: 32rpx;
		}
	}

	.prev-data {
		padding: 18rpx 10rpx;
		background: #f5f5f5;
		text-align: right;
		color: #999;
		font-size: 28rpx;

		.val {
			color: #333;
		}

		.use-btn {
			color: #d03c30;
		}
	}
</style>
